<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画播放和暂停</title>
    <style>
        .box {
            margin: 0 auto;
            margin-top: 100px;
            width: 240px;
            height: 240px;
            background-color: #f6dfaf;
            /* 绑定动画 animation: 动画名称 动画时间 重复次数 */
            animation: myanimation 5s infinite ;  

            /* farwards 设置动画停在最后的状态 */
            /* animation: myanimation 3s infinite alternate;   */

            /* alternate 设置动画反向播放 */
            /* animation: 动画名称 动画时间 播放次数 alternate;  alternate 设置动画反向播放，且在设置方向播放时，动画的播放次数必须要大于等于2次。 */
            /* animation: myanimation 4s 3 alternate; */
            
            /* 暂停动画 */
            animation-play-state: paused;
        }
        .box:hover{
            /* 暂停动画 */
            /* animation-play-state: paused; */

            /* 播放动画 */
            animation-play-state: running;
        }

        @keyframes myanimation {
            0% {
                width: 240px;
                height: 240px;
                background-color: #f6dfaf;
            }

            16.666% {
                width: 240px;
                height: 240px;
                background-color: #c0c0b0;
            }

            33.332% {
                width: 240px;
                height: 240px;
                background-color: #a0a0a0;
            }

            49.998% {
                width: 240px;
                height: 240px;
                background-color: #618198;
            }

            66.664% {
                width: 240px;
                height: 240px;
                background-color: #576469;
            }

            83.33% {
                width: 240px;
                height: 240px;
                background-color: #5e5b6d;
            }

            100% {
                width: 240px;
                height: 240px;
                /* #f6dfaf */
                background-color: red;  
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>